<template>
  <view class="deco-person-property-bar" :style="[innerStyle]">
    <!-- 对外渠道 -->
    <view v-if="channelType == 'outside'" class="flex flex-1 items-center">
      <view class="mr-22 flex flex-1 justify-between pl-32 pt-26 radius-16 bg-white" @click="toView({ url: 'pages/person/coupon-list/coupon-list', login: true })">
        <view class="flex flex-col font-24">
          <zm-icon-text name="arrow" text="我的优惠券" text-left color="#666" text-color="#666"></zm-icon-text>
          <text class="font-30 font-bold">共{{ couponCount }}张</text>
        </view>
        <image class="property-image" :src="useImage('/zuimei-film-oss/1.0.0/images/person-coupon-image.png')" mode="aspectFill" />
      </view>
      <view class="flex flex-1 justify-between pl-32 pt-26 radius-16 bg-white" @click="toView({ url: 'pages/person/film-card-list/film-card-list', login: true })">
        <view class="flex flex-col font-24">
          <zm-icon-text name="arrow" :text="`我的${cardName}`" text-left color="#666" text-color="#666"></zm-icon-text>
          <text class="font-30 font-bold">共{{ cardCount }}张</text>
        </view>
        <image class="property-image" :src="useImage('/zuimei-film-oss/1.0.0/images/person-card-image.png')" mode="aspectFill" />
      </view>
    </view>
    <!-- 内部渠道 -->
    <view v-else class="flex flex-1 items-center justify-around">
      <view class="flex flex-col items-center" @click="toView({ url: 'pages/person/coupon-list/coupon-list', login: true, mobile: true })">
        <text class="font-42 text-333 font-bold">{{ couponCount }}</text>
        <text class="text-666 mt-8 font-26">优惠券</text>
      </view>
      <view class="flex flex-col items-center" @click="toView({ url: 'pages/person/film-card-list/film-card-list', login: true, mobile: true })">
        <text class="font-42 text-333 font-bold">{{ cardCount }}</text>
        <text class="text-666 mt-8 font-26">{{ cardName }}</text>
      </view>
      <view class="flex flex-col items-center" @click="toView({ url: 'pages/person/user-wallet/user-wallet', params: { type: 'accoutRecharge' }, login: true, mobile: true })">
        <text class="font-42 text-333 font-bold">{{ userInfo.balance || 0 }}</text>
        <text class="text-666 mt-8 font-26">余额</text>
      </view>
      <view class="flex flex-col items-center" @click="toView({ url: 'pages/person/user-signin/user-signin', login: true })">
        <text class="font-42 text-333 font-bold">{{ integral }}</text>
        <text class="text-666 mt-8 font-26">积分</text>
      </view>
    </view>
  </view>
</template>

<script>
import mixin from "@/decoration/mixins"
import { mapGetters } from "vuex"
export default {
  name: "deco-person-property-bar",
  mixins: [mixin],
  data() {
    return {
      integral: 0,
      cardCount: 0,
      couponCount: 0
    }
  },
  computed: {
    ...mapGetters(["login", "userInfo", "personDeco", "mobile", "cardName"]),
    // 渠道类型
    channelType() {
      return this.personDeco?.config?.channelType
    }
  },
  watch: {
    login: {
      immediate: true,
      handler(v) {
        if (v) this.handleRefresh()
        else {
          this.integral = 0
          this.cardCount = 0
          this.couponCount = 0
        }
      }
    }
  },
  mounted() {
    this.init()
    this.handleRefresh()
  },
  methods: {
    init() {
      if (this.mitt) {
        this.mitt.on("refresh", () => {
          this.handleRefresh()
        })
      }
    },
    handleRefresh() {
      this.handleGetCard()
      this.handleGetCoupon()
      this.handleGetMyIntegral()
    },
    // 积分信息
    handleGetMyIntegral() {
      uni.$api.integral.myIntegral({}, { login: true }).then((res) => {
        this.integral = res.integral
      })
    },
    // 电影卡信息
    handleGetCard() {
      uni.$api.card.cardList({ validity: "1" }, { login: true, handleError: false }).then((res) => {
        this.cardCount = res.count
      })
    },
    // 优惠券信息
    handleGetCoupon() {
      uni.$api.coupon.getCouponList({}, { login: true, handleError: false }).then((res) => {
        this.couponCount = res.count
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.deco-person-property-bar {
  display: flex;
  align-items: center;
  .property-image {
    width: 120rpx;
    height: 120rpx;
  }
}
</style>
